import React, { useState,useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Row,Col } from 'antd';
import { HomeOutlined ,UnorderedListOutlined,FireOutlined,QuestionCircleOutlined} from '@ant-design/icons';
import axios from '../global/axios';
import api from '../global/api';
const NavIcon = (props) => {
  var _channel = props.name;
  switch(_channel) {
    case 'index':
      return <HomeOutlined/>
      break;
    case 'channel':
      return <UnorderedListOutlined/>
      break;
    case 'list':
      return <FireOutlined/>
      break;
    case 'about':
      return <QuestionCircleOutlined/>
      break;
    default:
      return ''
      break;  
  }  
}
const Header = () => {
  const [ logo, setLogo ] = useState({});
  const [ nav, setNav ] = useState([]);
  useEffect(()=>{
    const getLogo = async () => {
      const _logo = await axios.get(api.getRes,{params:{resName:'logo'}});
      _logo.data.resUrl = api.host + _logo.data.resUrl;
      setLogo(_logo.data);
    }
    const getNav = async () => {
      const _nav = await axios.get(api.getNav);
      setNav(_nav.data);
    }        
    getLogo();
    getNav(); 
  },[]) 
  return(
    <div className="header">
      <div className="header-position head-height"></div>
      <div className="header-box head-height">
        <Row className="wh row head-height">
          <span className="header-logo"><img className="logo" src={logo.resUrl} /></span>          
          <span className="header-info dis-show" >{logo.resContent}</span>        
          <Col className="header-nav noslt">
            {
              nav.map((item)=>{
                return( 
                  <Link to={item.channelName} className="nav-li"  key={item.channelName}>
                    <NavIcon name={item.channelName}/> 
                    {item.channelTitle}
                  </Link>
                )
              }) 
            }  
          </Col>
        </Row>
      </div>
    </div>
  )
}
export default Header;
